import './StoreXiang.less';
import { Avatar, Table,Space,Image } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import { useEffect } from 'react/cjs/react.development';
import http from '../../utils/http'
import { useState } from 'react';


const StoreXiang = () => {
    //上
    const xiangqings=()=>{
        console.log(1);
    }
    const columns1 = [
        {
            title: '店铺名称',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '一级店铺数',
            dataIndex: 'num',
            key: 'num',
        },
        {
            title: '微信头像/昵称',
            dataIndex: 'nickname',
            key: 'nickname',
        },
        {
            title: '开店时间',
            key: 'time',
            dataIndex: 'time',
        },
        {
            title: '付款方式',
            key: 'pay',
            dataIndex: 'pay',
        },
        {
            title: '核销码',
            key: 'code',
            dataIndex: 'code',
        },
        {
            title: '操作',
            key: 'action',
            render: (text, record) => (
                <Space size="middle" onClick={xiangqings}>
                    <a>查看店铺详情</a>
                </Space>
            ),
        },

    ];
    const data1 = [
        {
            key: '1',
            name: 'John Brown',
            num: 32,
            nickname: 'New York No. 1 Lake Park',
            time:'2019/12/24',
            pay:'线上支付(已支付)',
            code:'FLDK115552DFRE84D',
        },
        
    ];
    // 下
    const xiangqingx=()=>{
        console.log(1);
    }
    const columns = [
        {
            title: '店铺名称',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '一级店铺数',
            dataIndex: 'num',
            key: 'num',
        },
        {
            title: '微信头像/昵称',
            dataIndex: 'nickname',
            key: 'nickname',
        },
        {
            title: '开店时间',
            key: 'time',
            dataIndex: 'time',
        },
        {
            title: '付款方式',
            key: 'pay',
            dataIndex: 'pay',
        },
        {
            title: '核销码',
            key: 'code',
            dataIndex: 'code',
        },
        {
            title: '操作',
            key: 'action',
            render: (text, record) => (
                <Space size="middle" onClick={xiangqingx}>
                    <a>查看店铺详情</a>
                </Space>
            ),
        },

    ];

    const datax = [
        {
            key: 1,
            name: 'John Brown',
            num: 32,
            nickname: 'New York No. 1 Lake Park',
            time:'2019/12/24',
            pay:'线上支付(已支付)',
            code:'FLDK115552DFRE84D',
            children: [
                {
                    key: 11,
                    name: 'John Brown',
                    num: 32,
                    nickname: 'New York No. 1 Lake Park',
                    time:'2019/12/24',
                    pay:'线上支付(已支付)',
                    code:'FLDK115552DFRE84D',
                },
                {
                    key: 12,
                    name: 'John Brown',
                    num: 32,
                    nickname: 'New York No. 1 Lake Park',
                    time:'2019/12/24',
                    pay:'线上支付(已支付)',
                    code:'FLDK115552DFRE84D',
                    children: [
                        {
                            key: 121,
                            name: 'John Brown',
                            num: 32,
                            nickname: 'New York No. 1 Lake Park',
                            time:'2019/12/24',
                            pay:'线上支付(已支付)',
                            code:'FLDK115552DFRE84D',
                        },
                    ],
                },
            ],
        },
        {
            key: 13,
            name: 'John Brown',
            num: 32,
            nickname: 'New York No. 1 Lake Park',
            time:'2019/12/24',
            pay:'线上支付(已支付)',
            code:'FLDK115552DFRE84D',
            children: [
                {
                    key: 131,
                    name: 'John Brown',
                    num: 32,
                    nickname: 'New York No. 1 Lake Park',
                    time:'2019/12/24',
                    pay:'线上支付(已支付)',
                    code:'FLDK115552DFRE84D',
                    children: [
                        {
                            key: 1311,
                            name: 'John Brown',
                            num: 32,
                            nickname: 'New York No. 1 Lake Park',
                            time:'2019/12/24',
                            pay:'线上支付(已支付)',
                            code:'FLDK115552DFRE84D',
                        },
                        {
                            key: 1312,
                            name: 'John Brown',
                            num: 32,
                            nickname: 'New York No. 1 Lake Park',
                            time:'2019/12/24',
                            pay:'线上支付(已支付)',
                            code:'FLDK115552DFRE84D',
                        },
                    ],
                },
            ],
        },
    ];
    //获取基本信息
    let style={
        borderRadius:50,
        marginRight:100
    }
    const [gailan,setGaiLan]=useState()
    const [jiben,setJiben]=useState({});
    useEffect(()=>{
        sessionStorage.getItem('xiangqing')
        http({
            url:'/panchen/storeDetails',
            method:'get',
            data:{
                id:sessionStorage.getItem('xiangqing')
            }
        }).then((res1)=>{
            setJiben(res1[0])
        });
        http({
            url:'/panchen/storeMsg',
            method:'get',
            data:{
                id:sessionStorage.getItem('xiangqing')
            }
        }).then(res2=>{
            console.log(res2[0]);
            setGaiLan(res2[0])
        });
    },[])
    return (
        <div className='p-2'>
            {/* 数据概览 */}
            <div>
                <div>数据概览</div>
                <div className='d-f x-s-a p-3 mt3 gailan'>
                    <div>
                        <div className='f-color'>营业额</div>
                        <div className='font-w font-md'>￥{gailan!=undefined?gailan.sumprice==null?0:gailan.sumprice:''}.00</div>
                    </div>
                    <div className='shu'></div>
                    <div>
                        <div className='f-color'>成交件数</div>
                        <div className='font-w font-md'>{gailan!=undefined?gailan.sumnum==null?0:gailan.sumnum:''}</div>
                    </div>
                    <div className='shu'></div>
                    <div>
                        <div className='f-color'>一级店铺数</div>
                        <div className='font-w font-md'>58</div>
                    </div>
                    <div className='shu'></div>
                    <div>
                        <div className='f-color'>二级店铺数</div>
                        <div className='font-w font-md'>1,212</div>
                    </div>
                    <div className='shu'></div>
                    <div>
                        <div className='f-color'>全网店铺数</div>
                        <div className='font-w font-md'>24</div>
                    </div>
                </div>
            </div>
            {/* 基本信息 */}
            <div className='mt4'>
                <div>基本信息</div>
                <div className='d-f mx-3 mt-2'>
                    <div>
                        <div className='mt2'>店铺名称：</div>
                        <div className='mt2'>微信昵称：</div>
                        <div className='mt2'>开店时间：</div>
                        <div className='mt2'>付款方式：</div>
                        <div className='mt2'>核销码：</div>
                    </div>
                    <div className='mx-3'>
                        {/* 信息 */}
                        <div className='mt2'>{jiben.name}</div>
                        <div className='d-f mt2 y-c'>
                            <div className='d-f'>
                            <Image style={style}
                                        width={25}
                                        src={jiben.logo}
                                        />
                            </div>
                            <div>
                                TCYZ
                            </div>
                        </div>
                        <div className='mt2'>{jiben.create_time}</div>
                        <div className='mt2'>线上支付(已支付)/线下支付(未支付)/线下核销</div>
                        <div className='mt2'>FLDK115552DFRE84D</div>
                    </div>
                </div>
            </div>
            {/* 上级店铺 */}
            <div className='mt4'>
                <div>上级店铺</div>
                <div className='mt2'>
                    <Table columns={columns1} dataSource={data1} pagination={false} ellipsis={true}/>
                </div>
            </div>
            {/* 下级店铺 */}
            <div className='mt4'>
                <div>下级店铺</div>
                <div className='mt2'>
                    <Table columns={columns} dataSource={datax} pagination={false}/>
                </div>
            </div>
        </div>  
    );
}

export default StoreXiang;